<!DOCTYPE html>
<html lang="zh" manifest="offline2.appcache">
<!--<html lang="zh">-->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>春の排班表</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="bookmark" href="favicon.ico" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
    <!-- head begin -->
    <div class="container-fluid">
        <!-- -->
        <div class="row">
            <!-- calendar -->
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <td colspan="7" id="show_year" style="background-color:#DA5751;">
                            <ul class="nav nav-pills">
                                <li style="width:80%">
                                    &nbsp;<span id="nyear" style="color:#FFF">农历</span>
                                    <br />
                                    <input id="datetime" type="month" style="border:none;background: rgba(0,0,0,0);color:#FFF;">
                                </li>
                                <li role="presentation" class="dropdown">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                        <i class="glyphicon glyphicon-th-list"></i> <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown-menu" style="margin: 2px 0 0 -100px">
                                        <li> <button type="button" class="btn btn-link" data-toggle="modal" data-target=".bs-example-modal-sm" data-target="#myModal">设置</button></li>
                                        <li> <button type="button" class="btn btn-link" onclick="reset()">恢复默认</button></li>
                                    </ul>
                                </li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td id="m1" onclick="fm(1)">1月</td>
                        <td id="m2" onclick="fm(2)">２月</td>
                        <td id="m3" onclick="fm(3)">３月</td>
                        <td id="m4" onclick="fm(4)">４月</td>
                        <td id="m5" onclick="fm(5)">５月</td>
                        <td id="m6" onclick="fm(6)">６月</td>
                        <td rowspan="2">
                            <span onclick="init()" style="margin-right: 0px;color:red;font-size: 20pt">
                                今
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td id="m7" onclick="fm(7)">７月</td>
                        <td id="m8" onclick="fm(8)">８月</td>
                        <td id="m9" onclick="fm(9)">９月</td>
                        <td id="m10" onclick="fm(10)">10月</td>
                        <td id="m11" onclick="fm(11)">11月</td>
                        <td id="m12" onclick="fm(12)">12月</td>
                    </tr>
                    <tr>
                        <th>日</th>
                        <th>一</th>
                        <th>二</th>
                        <th>三</th>
                        <th>四</th>
                        <th>五</th>
                        <th>六</th>
                    </tr>
                </thead>
                <tbody id="table_body">
                </tbody>
            </table>
            <!-- calendar -->

            <!-- Small modal -->
            <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="myModal">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">设置</h4>
                        </div>
                        <div class="modal-body">
                            <input type=radio id="radio" name="radio" value="3" onclick="changeBan(3)" /> 三班倒
                            <input type=radio id="radio" name="radio" value="4" onclick="changeBan(4)" checked /> 四班倒
                            <br />
                            <span id="paiban">
                                <input type=radio id="radio2" name="radio2" value="0" checked /> 白(主班)
                                <input type=radio id="radio2" name="radio2" value="1" /> 白(副班)
                                <input type=radio id="radio2" name="radio2" value="2" /> 夜
                                <input type=radio id="radio2" name="radio2" value="3" /> 下
                                <!--<input type=radio id="radio2" name="radio2" value="x" /> 休-->
                            </span>
                            <br />
                            <input id="save_datetime" type="date" />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- small modal end -->
        </div>
        <!--content -->

        <!-- head end -->
        <!-- content -->
    </div>
    <!-- script -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/calendar.js"></script>
    <script type="text/javascript" src="js/plugs.js"></script>
    <script type="text/javascript" src="js/create-calendar-new.js"></script>
    <script type="text/javascript" src="js/template-native.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
        function fm(m) {
            for (var i = 1; i <= 12; i++) {
                $("td[id=m" + i + "]").removeAttr("style");
            }
            var now = new Date().Format("yyyy-MM");
            $("input[id=datetime]").val(now);
            var a = now.split('-');
            c(parseInt(a[0]), parseInt(m));
            now = new Date().Format("yyyy-MM-dd");
            $("input[id=save_datetime]").val(now);
        }

        function reset() {
            window.localStorage.clear();
            init();
        }
        ////////////////////////////
        function init() {
            for (var i = 1; i <= 12; i++) {
                $("td[id=m" + i + "]").removeAttr("style");
            }

            var now = new Date().Format("yyyy-MM");
            $("input[id=datetime]").val(now);
            var a = now.split('-');
            c(parseInt(a[0]), parseInt(a[1]));
            now = new Date().Format("yyyy-MM-dd");
            $("input[id=save_datetime]").val(now);
        }


        function c(y, m) {
            var now2 = new Date(y, m, 0).Format("yyyy-MM");
            $("input[id=datetime]").val(now2);
            var data = createCalender(y, m);
            //var data = createCalendar(y, m);
            $("#nyear").html(data.nyear);
            $("td[id=m" + data.month + "]").css("color", "red");
            var html = template("calendar_template", data);
            $("#table_body").html(html);
            return data;
        }

        function load() {
            init();
            $("input[id=datetime]").change(function(event) {
                console.log(this.value);
                var dc = this.value.split('-');
                c(parseInt(dc[0]), parseInt(dc[1]));
            });
            window.addEventListener('load', function(e) {
                window.applicationCache.addEventListener('updateready', function(e) {
                    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
                        window.applicationCache.swapCache();
                        window.location.reload();
                    } else {
                        //Manifest didn't changed. Nothing new to server. 
                    }
                }, false);
            }, false);
        }


        function save() {
            var paiban = $("input[id=radio]:checked").val();
            var ban = $("input[id=radio2]:checked").val();
            var datetime = $("input[id=save_datetime]").val();
            var changeDay = new Date(datetime).Format("dd");
            var newDay = parseInt(changeDay) - parseInt(ban);
            var newb = ['1', '3', '5', '8'];
            if (newDay < 10) {
                newDay = "0" + newDay;
            }
            var newDate = new Date(datetime).Format("yyyy-MM") + "-" + newDay;
            var d = parseInt(get1900YtoNowDay(newDate));
            //0 休　１　白(主) 3 白(副) 5夜　8下
            switch (parseInt(paiban)) {
                case 3:
                    switch (d % 3) {
                        case 0:
                            newb = ['1', '5', '8'];
                            break;
                        case 1:
                            newb = ['8', '1', '5'];
                            break;
                        case 2:
                            newb = ['5', '8', '1'];
                            break;
                    }
                    break;
                case 4:
                    switch (d % 4) {
                        case 0:
                            newb = ['1', '3', '5', '8'];
                            break;
                        case 1:
                            newb = ['8', '1', '3', '5'];
                            break;
                        case 2:
                            newb = ['5', '8', '1', '3'];
                            break;
                        case 3:
                            newb = ['3', '5', '8', '1'];
                            break;
                    }
                    break;
                default:
                    break;
            }
            var paiban = window.localStorage['paiban'] == undefined ? {} : JSON.parse(window.localStorage['paiban']);
            var ds = $("#save_datetime").val();
            console.log(ds);
            paiban[ds] = newb;
            window.localStorage['paiban'] = JSON.stringify(paiban);

            var dc = ds.split('-');
            c(parseInt(dc[0]), parseInt(dc[1]));
            $('#myModal').modal('hide');
        }

        $(document).ready(function() {
            load();
        });

    </script>
    <script id="paiban_template" type="text/html">
        <?if(paiban == 3){?>
         <input type=radio id="radio2" name="radio2" value="0" checked/> 白(主班)
         <input type=radio id="radio2" name="radio2" value="1" /> 夜
         <input type=radio id="radio2" name="radio2" value="2" /> 下
         <!-- <input type=radio id="radio2" name="radio2" value="x" /> 休 -->
        <?}else if(paiban == 4){?>
         <input type=radio id="radio2" name="radio2" value="0" checked/> 白(主班)
         <input type=radio id="radio2" name="radio2" value="1" /> 白(副班)
         <input type=radio id="radio2" name="radio2" value="2" /> 夜
         <input type=radio id="radio2" name="radio2" value="3" /> 下
         <!-- <input type=radio id="radio2" name="radio2" value="x" /> 休 -->
        <?}?>
    </script>
    <script id="calendar_template" type="text/html">
        <tr>
          <? for (i=0;i<days.length;i++){?>
              <?if(i%7==0){?>
                </tr><tr>
              <?}?>
              <?if(days[i].ck != undefined){?>
              <td title="<?=days[i].tag?>" onclick="c(<?=days[i].ck[0]?>,<?=days[i].ck[1]?>)">
              <?}else{?>
                 <?if(days[i].border == 1){?>
                      <td title="<?=days[i].tag?>" class="danger">
                  <?}else{?>
                      <td title="<?=days[i].tag?>">
                   <?}?>
              <?}?>
                  <?if(days[i].day == 15 && days[i].week == 6){?>
                          <span style="color:<?=days[i].style?>"><?=days[i].day?></span>
                          <span class="glyphicon glyphicon-yen" aria-hidden="true" style="color:red"></span>
                  <?}else if(days[i].day == 16 && days[i].week != 7){?>
                      <span style="color:<?=days[i].style?>"><?=days[i].day?></span>
                      <span class="glyphicon glyphicon-yen" aria-hidden="true" style="color:red"></span>
                  <?}else{?>
                      <span style="color:<?=days[i].style?>"><?=days[i].day?></span>
                  <?}?>
                  <br/>
                  <span style="color:<?=days[i].style?>;">
                      <?if(days[i].nday == "初一"){?>
                      <?=days[i].nmonth?>
                      <?}else{?>
                      <?=days[i].nday?>
                      <?}?>
                    </span>
                  <br/>
                  <span class="<?=days[i].banStyle?>"><?=days[i].ban?></span>
            </td>
          <?}?>
        </tr>
	</script>
    <!-- end script -->
</body>

</html>
